<template>
    <div>
        <el-row>
            <div v-for="item in teacherList"  class="text item">
                <el-card  class="box-card">
                    <el-row class="top">
                        <el-col :span="3">
                            <el-avatar :size="50" :src="circleUrl"></el-avatar>
                        </el-col>
                        <el-col :span="6">
                            <el-row><span id="userid">{{item.name}}</span></el-row>
                            <el-row><div style="margin-top: 10px; font-size: 14px; width: 500px">{{item.introduction}}</div></el-row>
                        </el-col>
                    </el-row>
                    <div style="margin-top: 25px"></div>
                    <el-row class="buttom">
                        <el-col :span="4">
                            <el-badge :value="item.blog_num" :max="99" class="item">
                                <el-button size="small" @click="toTeacher(item.teacher_id)">博客</el-button>
                            </el-badge>
                        </el-col>
                        <el-col :span="5">
                            <el-badge :value="item.clloect_num" :max="99" class="item">
                                <el-button size="small" @click="toTeacher(item.teacher_id)">知识库</el-button>
                            </el-badge>
                        </el-col>
                        <el-col :span="7">
                            <el-badge :value="item.avg_score" :max="99" class="item">
                                <el-button size="small">评分</el-button>
                            </el-badge>
                        </el-col>
                        <el-col :span="4" class="registerbutton">
                            <el-button type="success" @click="book(item.teacher_id)">预约</el-button>
                        </el-col>
                        <el-col :span="4" class="contextbutton">
                            <el-button  @click="toTeacher(item.teacher_id)">详情</el-button>
                        </el-col>
                    </el-row>

                </el-card>
            </div>
        </el-row>
        <el-row>
            <el-pagination
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </el-row>
    </div>

</template>

<script>
    import POST from "../../api/POST";

    export default {
        name: "teacherlist",
        components: {},
        data(){
            return{
                teacherList:[],
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
            }
        },
        methods:{
            getTeacherList(){
                let data={

                };
                POST.teacherShowList(data).then(res=>{
                    this.teacherList = res.content

                })
            },toTeacher(id){
                this.$router.push({path: `/teacher/`+id+`/detail`});
            },book(id){
                this.$router.push({path: `/teacher/`+id+`/appointment`});
            }
        },
        mounted() {
            this.getTeacherList()
        }
    }
</script>

<style scoped>
    .box-card {
        margin-top: 20px;
        width: 600px;
    }

</style>
